<template>
  <template v-if="user">
    <van-cell title="昵称" is-link to="/edit" :value="user.username" @click="toEdit('username','昵称',user.username)"/>
    <van-cell title="账户" :value="user.userAccount" />
    <van-cell title="头像" is-link to="/edit" :value="user.avatarUrl" @click="toEdit('avatarUrl','头像',user.avatarUrl)">
      <img style="height: 48px" :src="user.avatarUrl">
    </van-cell>
    <!-- <van-cell title="性别" is-link to="/edit" :value="userGender" @click="toEdit('gender','性别',user.gender)" /> -->
    <van-cell title="性别" is-link to="" :value="user.gender == 1 ? '男' : '女'" @click="showPicker = true" />
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-cell title="电话" is-link to="/edit" :value="user.phone" @click="toEdit('phone','电话',user.phone)"/>
    <van-cell title="标签" is-link to="/user/edit/tag" :value="user.tags" @click="toUpdateTag"/>
    <van-cell title="邮箱" :value="user.email"/>
    <!-- <van-cell title="星球编号" :value="user.planetCode" /> -->
    <van-cell title="个人介绍" is-link to="/user/edit" :value="user.profile"
    @click="toEdit('profile', '个人介绍', user.profile)"/>
    <van-cell title="注册时间" :value="user.createTime"  />
    <van-cell title="更改密码" is-link to="/user/password"/>
  </template>
</template>
<script setup lang="ts">
  import {useRouter} from "vue-router";
  import {onMounted, ref} from "vue";
  import { getCurrentUser } from "../services/user";
  import { showFailToast, showSuccessToast } from "vant/lib/vant.es";
  import myAxios from "../plugins/myAxios";

  const user = ref();
  const router = useRouter();
  const showPicker = ref(false);
  
  onMounted(async () => {
    user.value = await getCurrentUser();
  })

  const columns = [
    { text: '男', value: 1 },
    { text: '女', value: 0 },
  ];

  const onConfirm = async ({ selectedOptions }) => {
      showPicker.value = false;
      // fieldValue.value = selectedOptions[0].text;
      if(!user){
        showFailToast("用户未登录");
        return;
      }
      const res = await myAxios.post('user/update', {
        'id':user.value.id,
        ["gender"]:selectedOptions[0].value
      })

      if(res.code === 0 && res.data > 0){
        showSuccessToast('修改成功')
        user.value.gender = selectedOptions[0].value;
      } else {
        showFailToast('修改失败')
      }
    };


  const toEdit = (editKey: String, editName: String, currentValue: String) => {
    router.push({
      path: 'edit',
      query: {
        editKey,
        editName,
        currentValue,
      }
    })
  }

  const toUpdateTag = () => {
    router.push({
      path: '/user/edit/tag'}
    )
  }
</script>

<style scoped>

</style>